<template>
  <div class="app-container">
    <h1>{{title}}</h1>
    <div class="goods_view">
      <img id="goodsImg" width="560"/>
    </div>
    <div class="goods_info">
      <h2>{{obj.goodsName}}</h2>
      <p class="title" id="goodsTitle">{{obj.goodsTitle}}</p>
      <p>
        <span class="price1" style="color: #ec0d0d" id="seckillPrice">{{obj.seckilPrice}}</span>
        <del><span class="price2" id="goodsPrice">{{obj.goodsPrice}}</span></del>
      </p>
      <div class="seckill_data">
        <div>
          <span>秒杀开始时间</span>
          <p id="startDate">{{obj.startDate}}</p>
        </div>
        <div>
          <span>秒杀结束时间</span>
          <p id="endDate">{{obj.endDate}}</p>
        </div>
      </div>
      <div class="seckillStatus">
        <h3 id="miaoshaTip" :style="{color:this.color}" >{{obj.remainSeconds}}</h3>
      </div>
      <br>
      <div class="count">
        <span>库存数量：</span>
        <span id="stockCount">{{obj.stockCount}}</span>
      </div>
      <br>
      <el-button :disabled="isDisabled" v-show="isShow" type="danger" ref="buyButton" @click="getSeckillPath()">立即秒杀</el-button>
      <el-button v-show="showPar=='0'" @click="$router.push('/seckill/goods')" icon="el-icon-refresh-right">返回</el-button>
      <el-button v-show="showPar=='1'" @click="$router.push('/seckill/order')" icon="el-icon-refresh-right">返回</el-button>
      <input type="hidden" name="goodsId" id="goodsId"/>
    </div>
  </div>
</template>
<script>
import { getById, getPath, goMiao, getResult } from '@/api/seck/seckill'

export default {
  data() {
    return {
      title: '查看商品详情',
      loading: [],
      obj: {},
      isDisabled: false,
      isShow: true,
      showPar: '0',
      seconds: 9,
      color: 'red',
      deadline2: Date.now() + 1000 * 60 * 60 * 8
    }
  },
  created() {
    // 调用列表方法
    this.fetchData()
  },
  mounted() {
    // 改变原有的样式
    // this.$refs.buyButton.$el.style.cssText = 'background-color:#ecf5ff;color:#07b771;'
    const par = this.$route.query.show
    if (par && par === '1') {
      this.isDisabled = true
      this.isShow = false
      this.showPar = par
      this.title = '查看订单详情'
    }
  },
  methods: {
    fetchData() {
      const id = this.$route.query.id
      getById(id).then(response => {
        this.obj = response.data
        this.seconds = this.obj.remainSeconds
        if (this.seconds === 0) {
          this.obj.remainSeconds = '秒杀进行中☺☺☺'
        } else if (this.seconds === -1) {
          this.obj.remainSeconds = '秒杀已经结束☹☹☹'
          this.isDisabled = true
          this.color = 'blue'
        } else {
          this.obj.remainSeconds = '秒杀还没开始※倒计时：' + this.seconds
          this.isDisabled = true
          this.color = 'green'
          const times = setInterval(() => {
            this.seconds--
            this.obj.remainSeconds = '秒杀还没开始※倒计时：' + this.seconds
            if (this.seconds <= 0) {
              this.obj.remainSeconds = '秒杀进行中☺☺☺'
              this.isDisabled = false
              this.color = 'red'
              clearInterval(times)
            }
          }, 1000)
        }
      })
    },

    getSeckillPath() {
      const goodsId = this.obj.goodsId
      this.openLoading()
      getPath(goodsId).then(res => {
        if (res.code === 200) {
          this.goMiaoSha(res.data, goodsId)
        } else {
          this.$message.error(res.data)
        }
        this.loading.close()
      })
    },

    goMiaoSha(path, goodsId) {
      goMiao(path, goodsId).then(res => {
        if (res.code === 200) {
          this.getMiaoResult(goodsId)
        } else {
          this.$message.error(res.data)
        }
      })
    },

    getMiaoResult(goodsId) {
      getResult(goodsId).then(res => {
        if (res.code === 200) {
          const result = res.data
          if (result < 0) {
            this.$message.info('对不起，秒杀失败!!!')
          } else if (result === 0) {
            setTimeout(() => {
              this.getMiaoResult(goodsId)
            }, 200)
          } else {
            this.$confirm('恭喜你，秒杀成功！查看订单?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 跳转到订单列表页面
              this.$message({
                type: 'success', message: '跳转成功'
              })
              this.$router.push('/seckill/order')
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消跳转'
              })
            })
          }
        }
      })
    },

    openLoading() {
      this.loading = this.$loading({
        lock: true,
        text: '加载中···',
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)'
      })
    }
  }
}
</script>
